<template>
  <scroll-view
    scroll-y
    :scroll-top="scrollTop"
    :scroll-with-animation="true"
    refresher-enabled
    :refresher-triggered="refreshStatus"
    :enable-back-to-top="true"
    @refresherrefresh="resetRefresh(true)"
    @scrolltolower="reachBottom"
  >
    <view class="record-list">
      <OrderItem v-for="record in dataSource" :record="record" :key="record.id" />
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </view>
  </scroll-view>
  <ve-bottom-box size="mini" v-if="usePermission('svmsapp:member-manage-client.add')">
    <ve-button type="primary" @click="add" size="long">新增企业客户</ve-button>
  </ve-bottom-box>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'
  import OrderItem from './components/orderItem.vue'
  import { usePermission } from '@/hooks/usePermission'

  const queryParam = ref({})

  const props = defineProps({
    clientName: {
      type: String || Number,
    },
  })

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/clientInfo/getList',
    queryParam,
  )

  watch(
    () => props.clientName,
    (newVal) => {
      console.log(newVal)
      // if (newVal) {
      console.log('props', props)
      dataSource.value = []
      queryParam.value.pageNumber = 1
      queryParam.value.clientNameLike = props.clientName
      loadData()
      // }
    },
    { immediate: true },
  )
  
  const getData = (params) =>{
    queryParam.value.ecAuthenticationStatus = params.ecAuthenticationStatus
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  }

  const add = () => {
    uni.navigateTo({
      url: '/pages/market/memberManage/clientInfo/components/add',
    })
  }

  onMounted(() => {
    loadData()
  })

  onLoad(() => {
    uni.$on('refreshData', () => {
      queryParam.value.pageNumber = 1
      dataSource.value = []
      loadData()
    })
  })
  defineExpose({
    getData,
  })
</script>

<style lang="less" scoped>
  .record-list {
    padding: 24rpx;
  }
</style>
